<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-10">
        <my-checkbox v-model="foo" value="Hello Chen"></my-checkbox>
    </div>
    <script>
        Vue.component('my-checkbox', {
            template: '\
                    <span>\
                        <input type="checkbox" v-model="checked"/>{{ checked }}\
                        <div>{{ value }}</div>\
                    </span>\
                    ',
            model: {
              prop: 'checked',
              event: 'change'
            },
            props: {
              checked: Boolean,
              value: String
            }
          });
          new Vue({
              el: '#app-10',
              data: {
                  foo: true
              }
          });
    </script>
</body>


</html>